
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>汽车租赁管理系统</title>
  <div th:replace="header::common"></div>
  <link rel="stylesheet" href="css/login.css" th:href="@{/static/css/login.css}" media="all"/>
  <style>
    /* 覆盖原框架样式 */
    .layui-elem-quote{background-color: inherit!important;}
    .layui-input, .layui-select, .layui-textarea{background-color: inherit; padding-left: 30px;}
    .layui-elem-field legend {
      margin-left: 0px;
      padding: 0 10px;
      font-size: 35px;
    }
    .zyl_mar_01{margin-top: 8px;}
    .zyl_lofo_main {
      background-color: rgba(255,255,255,0.9);
      width: 450px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 53%;
      transform: translate(-50%, -50%);
      z-index: 999;
    }
  </style>
</head>
<body>
<!-- Head -->
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-sm12 layui-col-md12 zyl_mar_01">
      <blockquote class="layui-elem-quote">汽车租赁管理系统登陆界面</blockquote>
    </div>
  </div>
</div>
<!-- Head End -->

<!-- Carousel -->
<div class="layui-row">
  <div class="layui-col-sm12 layui-col-md12">
    <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
      <div carousel-item="">
        <div>
          <div class="zyl_login_cont"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Carousel End -->

<!-- Footer -->
<div class="layui-row">
  <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">
    © 2024 - lwh汽车租赁管理系统登陆登陆界面版权所有
  </div>
</div>
<!-- Footer End -->



<!-- LoginForm -->
<div class="zyl_lofo_main">
  <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
    <legend>欢迎登陆汽车租赁管理系统</legend>
  </fieldset>
  <div class="layui-row layui-col-space15">
    <form id="formId" class="layui-form zyl_pad_01" method="post">
      <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-form-item">
          <input type="text" name="name" lay-verify="required|username" autocomplete="off" placeholder="用户名"   class="layui-input">
          <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
        </div>
      </div>
      <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-form-item">
          <input type="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="密码" class="layui-input">
          <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
        </div>
      </div>
      <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-form-item">
          <input type="text" name="phone" lay-verify="required|phone" autocomplete="off" placeholder="手机号" class="layui-input">
          <i class="layui-icon layui-icon-cellphone zyl_lofo_icon"></i>
        </div>
      </div>
      <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-row">
          <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
            <div class="layui-form-item">
              <input type="text" name="code" id="vercode" lay-verify="required" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
              <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
            </div>
          </div>
          <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
            <img id="img_validation_code" src="/auth/code" onclick="refresh()" />
          </div>
        </div>
      </div>
      <div class="layui-col-sm12 layui-col-md12">
        <input class="layui-btn layui-btn-fluid" type="button" onclick="submitForm()" value="立即登录"></input>
      </div>
      <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">
       忘记密码请联系管理员 <a style="float: right" href="/user/toRegist"> 注册 </a>
      </div>
      <span th:text="${msg}" style="z-index: 9999"></span>
    </form>
  </div>
</div>
<!-- LoginForm End -->


<script type="text/javascript"  th:src="@{/static/js/jparticle.min.js}"></script>
<!-- ZylVerificationCode Js-->
<script type="text/javascript"  th:src="@{/static/js/zylVerificationCode.js}"></script>
<script>

  function refresh(){
    $('#img_validation_code').attr('src','/auth/code?r='+Math.random());
  }
  function submitForm(){
    $.post(//ajax
            '/user/login',
            $('#formId').serialize(),
            function (result){//后台返回给前台数据，格式为json
              console.log(result);
              if (result.ok){//result.ok==result.code==0
                let user=result.data;
                if (user.role==1){
                  mylayer.okUrl(result.msg,'/');
                }else if (user.role==2){
                  mylayer.okUrl(result.msg,'/indexUser');
                }
              }else{
                mylayer.errorMsg(result.msg);
              }
            },
            'json'
    );
  }
  layui.use(['carousel', 'form'], function(){
    var carousel = layui.carousel
            ,form = layui.form;
    //自定义验证规则
    form.verify({
      username: function(value){
        if(value.length < 3){
          return '账号至少得3个字符';
        }
      }
      ,pass: [/^[\S]{3,6}$/,'密码必须3到6位，且不能出现空格']
      ,vercodes: function(value){
        //获取验证码
        var zylVerCode = $(".zylVerCode").html();
        if(value!=zylVerCode){
          return '验证码错误（区分大小写）';
        }
      }
      ,content: function(value){
        layedit.sync(editIndex);
      }
    });
    //设置轮播主体高度
    var zyl_login_height = $(window).height()/1.2;
    var zyl_car_height = $(".zyl_login_height").css("cssText","height:" + zyl_login_height + "px!important");
    $('#zyllogin').css('background-image', 'url(/static/img/1.jpg)');
    $('#zyllogin').css('background-size', 'cover');
  });
</script>
</body>
</html>
